<template>
  <div>
    <div class="btn-group-wrapper bottom">
      <el-input
        style="width: 250px"
        placeholder="请输入关键字"
        icon="search"
        v-model="searchText"
        :on-icon-click="searchHandler">
      </el-input>
      <el-button type="primary" @click="">立即爬取</el-button>
      <el-progress type="circle" :percentage="25" :width="36"></el-progress>
      <el-button type="primary" @click="keywordHandler">关键词管理</el-button>
      <el-button type="primary" @click="websiteHandle">网站管理</el-button>
      <el-button type="primary" @click="intervalHandler">爬取时间设置</el-button>
    </div>
    <el-table ref="newsTable" :data="getWebNews" height="450" border :stripe="true" :highlight-current-row="true"
              style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        :show-overflow-tooltip="true"
        width="320">
      </el-table-column>
      <el-table-column
        prop="publishDate"
        :formatter="formatPTime"
        label="发布时间">
      </el-table-column>
      <el-table-column
        prop="crawlingDate"
        :formatter="formatCTime"
        label="爬取时间">
      </el-table-column>
      <el-table-column
        prop="website"
        label="网址"
        :show-overflow-tooltip="true"
        width="320">
      </el-table-column>
      <el-table-column
        prop="matching"
        label="匹配度"
        :formatter="formatMatching"
        width="70">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="getWebNewsCurrentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="getWebNewsTotalCount">
      </el-pagination>
    </div>
    <el-card class="box-card" v-if="current=='keyword'">
      <div class="btn-group-wrapper bottom">
        <el-input v-model="input" placeholder="创建关键词" style="width: 200px"></el-input>
        <el-button type="primary" @click="">创建</el-button>
      </div>
      <el-transfer
        filterable
        :filter-method="filterMethod"
        :titles="['新增关键词', '已有关键词']"
        :button-texts="['移除', '添加']"
        filter-placeholder="请输入城市拼音"
        v-model="value2"
        :data="data2">
      </el-transfer>
    </el-card>
    <el-card class="box-card" v-if="current=='interval'">
      <div class="iv-bottom">
        <p>爬取时间设置</p>
        <div>
          <span>每隔</span>
          <el-input v-model="input"></el-input>
          <span>小时</span>
          <el-input v-model="input"></el-input>
          <span>分爬取一次</span>
        </div>
      </div>
      <el-button type="primary" @click="">确定</el-button>
    </el-card>
    <el-card class="box-card" v-if="current=='website'">
      <div class="btn-group-wrapper bottom">
        <el-button type="primary" @click="">新增</el-button>
      </div>
      <el-table ref="newsTable" :data="getWebsiteList" height="450" border :stripe="true" :highlight-current-row="true"
                style="width: 100%">
        <el-table-column
          prop="websiteName"
          label="网站名称"
          width="80">
        </el-table-column>
        <el-table-column
          prop="websiteUrl"
          label="网址"
          width="80">
        </el-table-column>
        <el-table-column inline-template label="操作" width="130">
          <span>
            <el-button type="info" size="small" @click="deleteItemHandler($index,row)">删除</el-button>
            <el-button type="info" size="small" @click="editItemHandler($index, row)">修改</el-button>
          </span>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
  import { mapActions, mapGetters } from 'vuex'
  import moduleStore from './bll/store'
  import store from '../../store'
  import dateUtil from '../../common/dateUtil';
  (!store.state.sysSpider) && store.registerModule('sysSpider', moduleStore)
  export default {
    data() {
      const generateData2 = _ => {
        const data = [];
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };
      return {
        pageSize: 10,
        searchText: '',
        data2: generateData2(),
        value2: [],
        current: 'none',
        filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        }
      }
    },
    computed: {
      ...mapGetters(['getWebNews', 'getWebNewsCurrentPage', 'getWebNews', 'getWebNewsTotalCount', 'getWebNewsSearchText', 'getWebsiteList', 'getWsCurrentPage', 'getWsTotalCount'])
    },
    mounted() {
      this.initPage();
    },
    methods: {
      ...mapActions(['queryWebNews', 'searchWebNews', 'queryWebsiteList']),
      initPage() {
        this.queryWebNews();
      },
      formatPTime(row, column) {
        if (row.publishDate) {
          return dateUtil.getDateTime(new Date(row.publishDate));
        } else {
          return '';
        }
      },
      formatCTime(row, column) {
        if (row.crawlingDate) {
          return dateUtil.getDateTime(new Date(row.crawlingDate));
        } else {
          return '';
        }
      },
      formatMatching(row, column) {
        let matching = row.matching || 0;
        return `${matching}%`;
      },
      searchHandler() {

      },
      keywordHandler() {
        this.current = 'keyword';
      },
      websiteHandle() {
        this.current = 'website';
        this.queryWebsiteList();
      },
      intervalHandler() {
        this.current = 'interval';
      },
      handleSizeChange(val) {
        let searchText = this.getWebNewsSearchText;
        this.pageSize = val;
        if (searchText === '') {
          this.queryWebNews({index: 1, size: val});
        } else {
          this.searchWebNews({searchText: searchText, index: 1, size: val});
        }
      },
      handleCurrentChange(val) {
        let searchText = this.getWebNewsSearchText;
        if (searchText === '') {
          this.queryWebNews({index: val, size: this.pageSize});
        } else {
          this.searchWebNews({searchText: searchText, index: val, size: this.pageSize});
        }
      },
      deleteItemHandler(index, row) {
      },
      editItemHandler(index, row) {
      }
    }
  }
</script>
<style>
  .el-progress--circle {
    vertical-align: bottom;
  }

  .iv-bottom {
    margin-bottom: 20px;
  }

</style>
